<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'

const props = defineProps<{
  designWidth?: number
}>()

const scaleValue = ref(1)
const designWidth = props.designWidth || 1920

const calculateScale = () => {
  const deviceWidth = document.documentElement.clientWidth
  scaleValue.value = deviceWidth / designWidth
}

onMounted(() => {
  calculateScale()
  window.addEventListener('resize', calculateScale)
})

onBeforeUnmount(() => {
  window.removeEventListener('resize', calculateScale)
})

defineExpose({
  scaleValue
})
</script>

<template>
  <div class="w-full h-full p-0" :style="{ zoom: scaleValue }">
    <slot />
  </div>
</template>
